<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Extra-Map-App</title>
    <!--<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">-->
    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/4.4/esri/css/main.css">
    <link rel="stylesheet" href="css/mainApp.css">
    <script src="../dist/config.js"></script>
    <!--<script src="https://js.arcgis.com/4.4/"></script>-->
    <script src="http://127.0.0.1/arcgis_js_api/library/4.4/init.js"></script>
    <script>
        // Load the Map and MapView modules
        require([
            "esri/Map",
            "esri/views/SceneView",
            "dojo/on",
            "esri/Graphic",
            "esri/symbols/PointSymbol3D",
            "esri/symbols/IconSymbol3DLayer",
            "esri/layers/GraphicsLayer",
            "dojo/domReady!"], function(Map, SceneView,domOn,Graphic,PointSymbol3D,IconSymbol3DLayer,GraphicsLayer) {

            var iconSymbol3DLayer = new IconSymbol3DLayer({
                size: 28,  // points
                resource: { primitive: "circle" },
                material: { color: "red" }
            });

           var piontSymbol3D= new PointSymbol3D({
                symbolLayers: [iconSymbol3DLayer],
            })

            var graphicLayer=new GraphicsLayer();

            // Create a Map instance
            var myMap = new Map({
                basemap:"topo"

            });

            myMap.add(graphicLayer);

            var view = new SceneView({
                container:"viewDiv",
                map: myMap
            });

            view.on("pointer-down", function(event){
                var point = view.toMap(event);
                point.z=1;
                console.log(point)
                var stopGraphic = new Graphic({
                    geometry:point,
                    symbol: piontSymbol3D
                });

                graphicLayer.add(stopGraphic);
                console.log(graphicLayer)

            });

        });
    </script>

</head>
<body>
<button id="drawbutton1">点</button>
<button id="drawbutton2">线</button>
<button id="drawbutton3">面</button>
<button id="drawbutton4">圆</button>
<button id="drawbutton5">距离</button>
<button id="drawbutton6">面积</button>
<div id="viewDiv"></div>
</body>
</html>